<section id="modes" class="section--settings section--collapsible">
	<div class="section__header">
		<h2>
			Modes
			<a
				class="link__learn-more"
				title="Learn more"
				href="https://help.gitkraken.com/gitlens/gitlens-features/#modes"
			>
				<i class="icon icon__info"></i>
			</a>
		</h2>

		<p class="section__header-hint">Supports user-defined modes for quickly toggling between sets of settings</p>
		<div class="section__header-info">
			<i class="icon icon--md icon__bulb"></i>
			<div>
				<p>
					Use the
					<a class="command" title="Run command" href="command:gitlens.switchMode">GitLens: Switch Mode</a>
					command to quickly switch the active mode
				</p>
				<p>
					Use the
					<a class="command" title="Run command" href="command:gitlens.toggleReviewMode"
						>GitLens: Toggle Review Mode</a
					>
					command to toggle Review mode
				</p>
				<p>
					Use the
					<a class="command" title="Run command" href="command:gitlens.toggleZenMode"
						>GitLens: Toggle Zen Mode</a
					>
					command to toggle Zen mode
				</p>
			</div>
		</div>
	</div>

	<div class="section__collapsible">
		<div class="section__group">
			<div class="section__content">
				<div class="setting">
					<div class="setting__input">
						<input id="mode.statusBar.enabled" name="mode.statusBar.enabled" type="checkbox" data-setting />
						<label for="mode.statusBar.enabled">Show the active mode in the status bar</label>
					</div>
				</div>

				<div class="settings ml-2">
					<div class="setting" data-enablement="mode.statusBar.enabled">
						<div class="setting__input">
							<label for="mode.statusBar.alignment">Position the annotation on the</label>
							<div class="select-container">
								<select
									id="mode.statusBar.alignment"
									name="mode.statusBar.alignment"
									data-setting
									disabled
								>
									<option value="left">left</option>
									<option value="right">right</option>
								</select>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="section__preview">
				<img
					class="image__preview"
					src="#{webroot}/media/status-bar.webp"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/modes-status-bar-left.webp"
					data-visibility="mode.statusBar.enabled &amp; mode.statusBar.alignment =left"
					loading="lazy"
					width="600"
					height="206"
				/>
				<img
					class="image__preview--overlay hidden"
					src="#{webroot}/media/modes-status-bar-right.webp"
					data-visibility="mode.statusBar.enabled &amp; mode.statusBar.alignment =right"
					loading="lazy"
					width="600"
					height="206"
				/>
			</div>
		</div>

		<div class="section__group">
			<p class="section__hint">
				<i class="icon icon__info"></i> For more options or to add your own custom modes, open
				<a
					class="command"
					title="Open Settings"
					href="command:workbench.action.openSettings?%22gitlens.modes%22"
					>Settings</a
				>
				and search for <b><i>gitlens.modes</i></b>
			</p>
		</div>
	</div>
</section>
